/*
 * @Description: 客户服务中心   CustomerServiceCenter
 * @version: 
 * @Company: 
 * @Author: ZhengZhuang
 * @Date: 2019-08-30 17:03:16
 * @LastAuthor   : zhengzhuang
 * @lastTime     : 2020-01-09 16:09:18
 */
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:image_picker/image_picker.dart';
import 'package:C20Driver/routers/navigator_util.dart';
import 'package:C20Driver/service/request.dart';
import 'package:C20Driver/utils/toast.dart';
import 'package:C20Driver/utils/utils.dart';

class CustomerServiceCenter extends StatefulWidget {
  @override
  _CustomerServiceCenterState createState() => _CustomerServiceCenterState();
}

class _CustomerServiceCenterState extends State<CustomerServiceCenter> {
  List<String> tags = [
    '升级问题',
    '提现问题',
    'BUG问题',
    '建议问题',
  ];

  String choice = '升级问题';

  List<String> selected = [];

  String opinionString;

  // 选取选择的反馈问题
  setChoice(data) {
    setState(() {
      choice = data;
    });
  }

  // 设置意见
  setOpinion(data) {
    setState(() {
      opinionString = data;
    });
  }

  // 上传反馈照片
  Future uploadFeedbackPhotos() async {
    if (selected.length != 3) {
      var image = await ImagePicker.pickImage(source: ImageSource.gallery);
      if (image == null) return;
      Request.uploadImg(image.path).then((res) {
        if (res == '') return;
        selected.add(res);
        setState(() {
          selected = selected;
        });
      });
    } else {
      ToastX.center('已到最大上传数量');
    }
  }

  // 删除反馈图片
  delPhotos(val) {
    selected.remove(val);
    setState(() {
      selected = selected;
    });
  }

  // 上传反馈内容
  submitInput(context) {
    if (opinionString == null || opinionString == '')
      return ToastX.center('请输入反馈内容');

    Request.submitInput(choice, selected, opinionString).then((res) {
      choice = '升级问题';
      selected = [];
      opinionString = '';
      NavigatorUtil.goBack(context);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('客服中心'),
      ),
      body: Container(
        child: ListView(
          children: <Widget>[
            Container(
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: ScreenUtil().setHeight(50.0),
                  ),
                  Text(
                    '反馈问题的类型',
                    style: TextStyle(
                      fontSize: ScreenUtil().setSp(28.0),
                      color: Colors.black87,
                    ),
                  ),
                  SizedBox(
                    height: ScreenUtil().setHeight(20.0),
                  ),
                  Wrap(
                    spacing: 8.0,
                    runSpacing: 8.0,
                    children: tags.map((tag) {
                      return ChoiceChip(
                        label: Text(tag),
                        selectedColor: Colors.black26,
                        selected: choice == tag,
                        onSelected: (value) => setChoice(tag),
                      );
                    }).toList(),
                  ),
                  SizedBox(
                    height: ScreenUtil().setHeight(50.0),
                  ),
                  Container(
                    width: ScreenUtil().setHeight(670.0),
                    padding: EdgeInsets.only(
                      left: ScreenUtil().setHeight(20.0),
                      right: ScreenUtil().setHeight(20.0),
                    ),
                    decoration: BoxDecoration(
                      color: Color.fromARGB(255, 245, 245, 245),
                      border: Border.all(
                        width: 1,
                        color: Colors.black26,
                      ),
                      borderRadius:
                          BorderRadius.circular(ScreenUtil().setHeight(6.0)),
                    ),
                    child: TextField(
                      maxLines: 5,
                      decoration: InputDecoration(
                        hintText: '其他意见或建议（内容匿名，可以放心填写）',
                        border: InputBorder.none,
                      ),
                      style: TextStyle(
                        fontSize: ScreenUtil().setSp(26.0),
                        color: Colors.black87,
                      ),
                      onChanged: (val) => setOpinion(val),
                    ),
                  ),
                  SizedBox(
                    height: ScreenUtil().setHeight(60.0),
                  ),
                  _uploadPictures(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 上传图片
  Widget _uploadPictures() {
    return Container(
      width: ScreenUtil().setHeight(670.0),
      alignment: Alignment.topLeft,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            alignment: Alignment.topLeft,
            child: Text(
              '上传相关问题的截图或照片（${selected.length}/3）',
              style: TextStyle(
                fontSize: ScreenUtil().setSp(26.0),
                color: Colors.black87,
              ),
            ),
          ),
          SizedBox(
            height: ScreenUtil().setHeight(30.0),
          ),
          Container(
            alignment: Alignment.topLeft,
            child: Wrap(
              spacing: ScreenUtil().setHeight(20.0), // 相邻之间的间隔
              runSpacing: ScreenUtil().setHeight(20.0), // 行间距
              alignment: WrapAlignment.start,
              children: <Widget>[
                Wrap(
                  spacing: ScreenUtil().setHeight(20.0), // 相邻之间的间隔
                  runSpacing: ScreenUtil().setHeight(20.0), // 行间距
                  alignment: WrapAlignment.start,
                  children: selected.map((item) {
                    return Container(
                      width: ScreenUtil().setHeight(200.0),
                      height: ScreenUtil().setHeight(200.0),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(
                          ScreenUtil().setHeight(6.0),
                        ),
                      ),
                      child: Stack(
                        children: <Widget>[
                          Image.network(
                            item,
                            width: ScreenUtil().setHeight(200.0),
                            height: ScreenUtil().setHeight(200.0),
                          ),
                          Positioned(
                            top: 0,
                            right: 0,
                            child: InkWell(
                              child: Image.asset(
                                'assets/icon/imageDelIcon.png',
                                width: ScreenUtil().setHeight(50.0),
                                height: ScreenUtil().setHeight(50.0),
                              ),
                              onTap: () => delPhotos(item),
                            ),
                          ),
                        ],
                      ),
                    );
                  }).toList(),
                ),
                InkWell(
                  child: Container(
                    width: ScreenUtil().setHeight(200.0),
                    height: ScreenUtil().setHeight(200.0),
                    decoration: BoxDecoration(
                      color: Color.fromARGB(255, 245, 245, 245),
                      border: Border.all(
                        width: ScreenUtil().setHeight(1.0),
                        color: Colors.black12,
                      ),
                      borderRadius: BorderRadius.circular(
                        ScreenUtil().setHeight(6.0),
                      ),
                    ),
                    child: Icon(
                      Icons.add,
                      size: ScreenUtil().setHeight(100.0),
                      color: Colors.black26,
                    ),
                  ),
                  onTap: () => uploadFeedbackPhotos(),
                ),
              ],
            ),
          ),
          SizedBox(
            height: ScreenUtil().setHeight(50.0),
          ),
          MaterialButton(
            minWidth: ScreenUtil().setHeight(670.0),
            height: ScreenUtil().setHeight(100.0),
            color: Color.fromARGB(255, 255, 153, 0),
            child: Text(
              '匿名提交',
              style: TextStyle(
                color: Colors.white,
                fontSize: ScreenUtil().setSp(35.0),
              ),
            ),
            onPressed: () => submitInput(context),
          ),
          SizedBox(
            height: ScreenUtil().setHeight(50.0),
          ),
          InkWell(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(Icons.call),
                Text('客服热线：400-089-3089'),
              ],
            ),
            onTap: () => Utils.callPhone('400-089-3089'),
          ),
        ],
      ),
    );
  }
}
